<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<script src="../lib/jquery-2.1.0.min.js"></script>

	</head>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">图表统计</h1>
		</header>
		<div style="margin-top:55px;">
			<div>
				<button id='showUserPicker' class="mui-btn mui-btn-primary mui-btn-outlined" style="margin-left: 2%;width: 96%;" type='button'>全部区域</button>
			</div>
			<div id="main" class="mui-content" style="height:500px;width:100%;"></div>
		</div>

		<script src="../lib/mui/mui.min.js"></script>
		<script src="../lib/mui/mui.picker.js"></script>
		<script src="../lib/mui/mui.poppicker.js"></script>
		<script src="../js/serviceUrlConfig.js"></script>
		<script src="../lib/echarts.js"></script>
		<script type="text/javascript">
			mui.init()
			mui.plusReady(function() {
				plus.navigator.setStatusBarStyle('dark');
				//普通示例
				var userPicker = new mui.PopPicker();
				userPicker.setData([{
						value: '全部区域',
						text: '全部区域'
					}, {
						value: '书院镇',
						text: '书院镇'
					}, {
						value: '南汇新城镇',
						text: '南汇新城镇'
					},
					{
						value: '万祥镇',
						text: '万祥镇'
					}, {
						value: '泥城镇',
						text: '泥城镇'
					}
				]);
				var showUserPickerButton = document.getElementById('showUserPicker');
				var userResult = document.getElementById('userResult');
				showUserPickerButton.addEventListener('tap', function(event) {
					userPicker.show(function(items) {
						//userResult.innerText = JSON.stringify(items[0]);
						//返回 false 可以阻止选择框的关闭
						//return false;
						showUserPickerButton.innerText = items[0].text;
						if(items[0].text == '全部区域') {
							fillChartByRegion('');
						} else {
							fillChartByRegion(items[0].text);
						}
					});
				}, false);
			}, false);

			var myChart = echarts.init(document.getElementById('main'));

			function fillChartByRegion(region) {
				var url = getServletUrl("LandServlet");
				$.ajax({
					type: "POST",
					url: url,
					data: {
						commdCode: "statLandTypeByRegion",
						region: region
					},
					dataType: "json",
					success: function(data) {
						if(data.type = 1) {
							option1.yAxis[0].data = data.tag.landType;
							option1.series[0].data = data.tag.landArea;
							myChart.clear();
							myChart.setOption(option1);
						}
					},
					error: function(xhr, type, errorThrown) {
						mui.alert("服务器连接失败，请联系管理员！", "提示");
					}
				});

			};

			var app5 = [];
			app5.config = {
				rotate: 90,
				align: 'left',
				verticalAlign: 'middle',
				position: 'insideBottom',
				distance: 15,
				onChange: function() {
					var labelOption = {
						normal: {
							rotate: 90,
							align: 'left',
							verticalAlign: 'middle',
							position: 'insideBottom',
							distance: 15
						}
					};
					myChart.setOption({
						series: [{
							label: labelOption
						}, {
							label: labelOption
						}, {
							label: labelOption
						}, {
							label: labelOption
						}]
					});
				}
			};
			var labelOption = {
				normal: {
					show: false,
					position: app5.config.position,
					distance: app5.config.distance,
					align: app5.config.align,
					verticalAlign: app5.config.verticalAlign,
					rotate: app5.config.rotate,
					fontSize: 16,
					rich: {
						name: {
							textBorderColor: '#fff'
						}
					}
				}
			};
			option1 = {
				title: {
					x: 'center'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				//				toolbox: {
				//					show: true,
				//					orient: 'vertical',
				//					left: 'right',
				//					top: 'center',
				//					feature: {
				//						mark: {
				//							show: true
				//						},
				//						dataView: {
				//							show: false,
				//							readOnly: false
				//						},
				//						magicType: {
				//							show: true,
				//							type: ['stack']
				//						},
				//						restore: {
				//							show: true
				//						}
				//
				//					}
				//				},

				grid: {
					left: '3%',
					right: '18%',
					bottom: '3%',
					containLabel: true
				},

				xAxis: [{
					type: 'value',
					name: '面积（亩）'
				}],
				yAxis: [{
					type: 'category',
					axisTick: {
						show: false
					},
					data: null
				}],

				series: [{
					name: '面积',
					type: 'bar',
					barGap: 0,
					label: labelOption,
					data: null
				}]
			};
			fillChartByRegion('');
		</script>

	</body>

</html>